import React, { Component } from "react";
import { Icon, Button, Tabs, Table, Modal, Input, Select, Slider } from "antd";
const { TabPane } = Tabs;
const { Option } = Select;
class datadetail extends Component {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    const dataSource = [
      {
        key: "1",
        name: "id",
        type: "integer",
        explain: "id",
        record: "150",
        missing: "0",
        scattergram: "123",
      },
    ];

    const columns = [
      {
        title: "字段名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "字段类型",
        dataIndex: "type",
        key: "type",
      },
      {
        title: "字段说明",
        dataIndex: "explain",
        key: "explain",
      },
      {
        title: "记录数",
        dataIndex: "record",
        key: "record",
      },
      {
        title: "缺失值数量",
        dataIndex: "missing",
        key: "missing",
      },
      {
        title: "分布图",
        dataIndex: "scattergram",
        key: "scattergram",
      },
    ];
    return (
      <div>
        <div style={{ margin: 5, fontSize: 20, fontWeight: 700 }}>
          花样本Y特征变量&nbsp;&nbsp;
          <Icon type="edit" />
        </div>
        <div style={{ margin: 5 }}>
          <span>花样虚拟融合后的实验数据集</span>
          <span style={{ float: "right" }}>
            <Button type="primary">特征工程</Button>
            <Button onClick={this.showModal}>去建模</Button>
            <Button>更多</Button>
          </span>
        </div>
        <Tabs defaultActiveKey="1" style={{ width: "98%" }}>
          <TabPane tab="基本分布" key="1">
            <Table dataSource={dataSource} columns={columns} />
          </TabPane>
        </Tabs>
        <Modal
          title="配置"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div>
            <div>模型基本信息</div>
            <div style={{ marginTop: 20 }}>
              <span>模型名称：</span>
              <Input style={{ width: 300 }} value="花样本Y特征模型" />
            </div>
            <div style={{ marginTop: 5 }}>
              <span>模型描述：</span>
              <Input style={{ width: 300 }} value="花样本Y特征模型" />
            </div>
            <div style={{ margin: "20px 0" }}>数据与算法配置</div>
            <div>
              <span>实验数据集：</span>
              <Select defaultValue="1" style={{ width: 300 }}>
                <Option value="1">花样本Y特征变量</Option>
                <Option value="2">全局扫描</Option>
                <Option value="3">自定义扫描</Option>
              </Select>
            </div>
            <div style={{ marginTop: 5 }}>
              <span>试验集拆分：</span>
              <Slider
                style={{
                  width: 300,
                  display: "inline-block",
                  marginBottom: 0,
                }}
                marks={{
                  0: "A",
                  20: "B",
                  40: "C",
                  60: "D",
                  80: "E",
                  100: "F",
                }}
              />
            </div>
            <div style={{ marginTop: 20 }}>
              <span>算法类型：</span>
              <Select defaultValue="1" style={{ width: 300 }}>
                <Option value="1">逻辑回归</Option>
                <Option value="2">全局扫描</Option>
                <Option value="3">自定义扫描</Option>
              </Select>
            </div>
            <div style={{ marginTop: 15 }}>
              <span>目标变量：</span>
              <Select defaultValue="1" style={{ width: 300 }}>
                <Option value="1">y</Option>
                <Option value="2">全局扫描</Option>
                <Option value="3">自定义扫描</Option>
              </Select>
            </div>
            <div style={{ marginTop: 15 }}>
              <span>　正列值：</span>
              <Select defaultValue="1" style={{ width: 300 }}>
                <Option value="1">1</Option>
                <Option value="2">全局扫描</Option>
                <Option value="3">自定义扫描</Option>
              </Select>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default datadetail;
